<template>
	<div>
		<div class="mui-numbox" data-numbox-min="1"  :data-numbox-max="shopId">
			<button class="mui-btn mui-btn-numbox-minus" type="button" >-</button>
			<input id="test" class="mui-input-numbox" type="number" :value="totalNum" @change="change" ref="num">
			<button class="mui-btn mui-btn-numbox-plus" type="button" >+</button>
		</div>
	</div>
</template>

<script>
	
	import mui from "../../lib/mui/js/mui.js"

	export default {
		data:function () {
			return {
				num:1,
				initNum:1
			}
		},
		computed:{
			//动态计算商品在购物车中的数量
			totalNum:function  () {
				var num =1;
				this.$store.state.car.some((item)=>{
					if(item.id == this.shopId){
						num = item.count
					}
				})			
				return num
			}
		},
		props:["shopId"],
		methods:{
			change(){

				//获取数量 添加数量的约束
				this.num = parseInt(this.$refs.num.value)
				this.shopId = parseInt(this.shopId)
				if(this.num>this.shopId){
					this.num = this.shopId;
				}
				if(this.num<1){
					this.num = 1
				}
				// console.log(this.num);
				var selected = this.$store.getters.getSelectObj[this.shopId];
				//更新store和localStorage中的购物数据
				this.$store.commit("updateToCar",
					{id:parseInt(this.shopId),count:parseInt(this.num),selected:selected})

			},
		
		},
		created(){

		},
		mounted(){
			mui(".mui-numbox").numbox();
			// console.log(this.shopId)
		},
	}
</script>

<style lang="scss" scoped>

</style>